<template>

	<view class="container">
		<uni-nav-bar style="position: fixed;left: 0;right: 0;top:0;height: 108rpx;z-index: 100;" left-icon="left" :statusBar="true" :shadow="true" left-text="返回" @clickLeft="back"
			@clickRight="handle(['fade', 'zoom-in'])">

			<template v-slot:default>
				<text style="font-size: 28rpx;font-weight: 500;">医嘱列表</text>
			</template>
			<template v-slot:right>
				<text style="font-size: 28rpx;font-weight: 500;">{{isSearch?'取消':'搜索'}}</text>
			</template>
		</uni-nav-bar>

		<!-- 		<view class="legend">
			<view class="legend-item" v-for="(item,index) in legend" :key="index">
				
				<text :style="{display:'block',background:item.color,width:'80rpx',height:'28rpx'}"></text>
				<text >{{item.text}}</text>
			</view>
		</view> -->
		<view class=""
			style="height: 44px;position: fixed;left: 0;right: 0;top: 148rpx;background-color: #EEE;z-index: 100;">
			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles"
				:show="isSearch">
				<uni-forms v-if="isSearch">
					<uni-forms-item style="padding-top: 6rpx;">
						<view class=""
							style=" display: flex;align-items: center;justify-content: space-between;padding: 0 28rpx;">
							<uni-easyinput type="search" style="display: inline-block;"
								placeholder="请输入搜索内容" v-model="params.xm"></uni-easyinput>
							<text style="display: inline-block;width: 100rpx; text-align: center;" @click="searchHandle">搜索</text>
						</view>
					</uni-forms-item>
				</uni-forms>
			</uni-transition>
			<!-- <button class="transition-button" type="primary" @click="handle(['fade', 'slide-right'])">由右至左过</button> -->



			<uni-transition ref="ani" custom-class="transition" :mode-class="modeClass" :styles="styles" :show="show">
				<view class="tabs" v-show="!isSearch">
					<view class="tabs-item" v-for="(item,index) in legend" @tap="changeHandle(index)">
						<text :style="{color: currentIndex === index?item.color:''}">{{item.text}}</text>
					</view>

					<view class="tabs-bottom-line" :style="{left:40 + (currentIndex*126) + 'rpx',
				backgroundColor:legend[currentIndex].color}"></view>
				</view>
			</uni-transition>
		</view>
		<view class="box-group"  style="padding: 260rpx 30rpx 50rpx;" v-if="listData.length">
			<view class="box-item"  @tap="openDetail(item.id)" v-for="(item,index) in listData" :key="index"
				:style="{boxShadow: `0rpx -2rpx 2rpx ${legend[currentIndex].color} inset`,border:`1px solid ${legend[currentIndex].color}` }">
				<uni-swipe-action class="action-item">

					<uni-swipe-action-item class="action-item" :disabled="!(currentIndex==0)" :right-options="currentIndex==0?options:[]"
						@click="onClick($event,item)" @change="change">
						<view class="list">
							<view class="left">
								<image style="width: 100rpx; height: 100rpx; " mode="widthFix"
									src="../../static/icons/sy.png"></image>
								<!-- <img :src="getImg('sy.png')" alt="图片" srcset="" style="width: 50px;"/> -->
								<view class="text">
									<text style="font-size: 28rpx;display: block;">{{item.xm}}</text>
									<text style="font-size: 20rpx;display: block;">患者编号：{{item.bh||'--'}}</text>
									<text style="font-size: 20rpx;display: block;">长/临：{{item.cl||'--'}}</text>
									<text style="font-size: 20rpx;display: block;">责任医生：{{item.sqname||'--'}}</text>
									<text style="font-size: 20rpx;display: block;">医嘱状态：{{item.zt||'--'}}</text>

								</view>
							</view>
							<view class="right">
								<text style="font-size: 20rpx;display: block;">到达时间：{{item.sj||'--'}}</text>
								<text style="font-size: 20rpx;display: block;">执行时间：{{item.zxsj||'--'}}</text>
							</view>
						</view>

					</uni-swipe-action-item>

				</uni-swipe-action>
				
			</view>
			<uni-load-more :status="status" @clickLoadMore="clickLoadMore" :contentText="contentText" />
			
			
		</view>
		<view class="no-data" v-else style="text-align: center;" >
			<image src="../../static/icons/nodata.png" style="width: 150rpx;" mode="widthFix"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		getYizhuList,
		finish,
		waste,
		StopIt
	} from '../../api/yizhu.js'
	import {
		log
	} from '../../common/util.js'
	import {
		toast,
		signOut,
		getStorageSync,
		useRouter
	} from '../../utils/utils.js'
	export default {

		data() {
			// 病情判断，体征录入，入出量记录，生命体征，物资信息列表，入出量，药房捡药，物资消耗，检验，物资查看，医嘱执行，后送执行，日常护理记录，结果录入，检查，输血记录，伤员接收，伤员护理记录，套餐医嘱，扫一扫，扫码结果
			return {
				status: 'no-more',
				contentText: {
					contentdown: '-上拉加载更多-',
					contentrefresh: '加载中...',
					contentnomore: '~别拉了，到底了~'
				},
				styles: {},
				show: true,
				modeClass: 'fade',
				searchValue: null,
				isSearch: false,
				currentIndex: 0,
				options: [{
					text: '完成',
					value:1,
					style: {
						backgroundColor: '#84cc16',
						height: '80px'
					}
				}, {
					text: '停止',
					value:2,
					style: {
						backgroundColor: '#dd524d'
					},

				}, {
					text: '作废',
					value:3,
					style: {
						backgroundColor: '#F18180'
					},

				}],
				legend: [{
						color: '#8EBC8B',
						text: '新开'
					},
					{
						color: '#84cc16',
						text: '已完成'
					},
					{
						color: '#F18180',
						text: '已作废'
					},
					{
						color: '#DAA521',
						text: '停止'
					}
				],
				listData: [

				],
				params:{
					pageNum:1,
					pageSize:10,
					id:'',
					xm:'',
					zt:'',
					
				},
				query:[]
			}
		},
		onLoad() {
			this.params.zt = this.legend[this.currentIndex].text
			this.status = 'loading'
			this.loadYizhuList()


		},
		// 下拉刷新
		onPullDownRefresh() {
			this.params.pageNum = 1
			this.loadYizhuList()
		},
		// 触底加载
		onReachBottom() {
			this.params.pageNum++
			this.loadYizhuList()
		},
		methods: {
			searchHandle(){
				this.loadYizhuList()
			},
			loadYizhuList() {
				console.log(this.params);
				getYizhuList(this.params).then(res => {
					if(res.code==200){
						this.status = this.params.pageNum >= Math.ceil(res.total / 10)? 'no-more':'more'
						
						
						if(this.params.pageNum>1){
							this.listData.push(...res.rows)
						}else{
							this.listData = res.rows
						}
					}
				})
			},
			back() {
				useRouter('/pages/index/index', {}, 'switchTab')

			},
			// tabs切换
			changeHandle(index) {
				this.currentIndex = index
				this.params.zt = this.legend[this.currentIndex].text
				log(this.params.zt)
				this.status = 'loading'
				this.loadYizhuList()
			},
			openDetail(id) {
				uni.navigateTo({
					url: `/pages/doctorsAdvice/detail?id=${id}`
				})
			},
			handle(type) {
				this.show = !this.show
				this.modeClass = type
				this.isSearch = !this.isSearch
			},
			onClick(e,item) {
				console.log(e.content);
				console.log(item);
				this.query.push(item.id)
				switch(e.content.value){
					case 1:
					finish(this.query).then(res=>{
						if(res.code===200){
							toast('完成医嘱成功')
						}
						this.query=[]
						this.loadYizhuList()
					})
					break
					case 2:
					waste(this.query).then(res=>{
						if(res.code===200){
							toast('作废医嘱成功')
						}
						this.query=[]
						this.loadYizhuList()
					})
					break
					case 3:{
						StopIt(this.query).then(res=>{
							if(res.code===200){
								toast('停止医嘱成功')
							}
							this.query=[]
							this.loadYizhuList()
						})
						break
					}
				}
			},
			change() {
				console.log(2);
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #efefef;
		position: relative;

	}

	::v-deep.uni-navbar__content_view {
		font-size: 28rpx;
	}

	::v-deep.uni-navbar-btn-text>uni-text {
		font-size: 28rpx !important;
		font-weight: 500;
	}

	::v-deep.uni-navbar__header-container {
		display: flex;
		flex: 1;
		padding: 0 10px;
		overflow: hidden;
		align-items: center;
		justify-content: center;
	}

	.input-view {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #efefef;
		border-radius: 50rpx;
		height: 54rpx;

		.input-uni-icon {
			display: inline-block;
			text-indent: 20rpx;
		}

		.nav-bar-input {
			// display: inline-block;
			// padding: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			height: 24rpx;
		}
	}

	.container {
		.legend {
			width: 100%;
			height: 100rpx;
			background-color: #FFFFFF;
			margin-bottom: 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 30rpx;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;

			.legend-item {
				text {
					font-size: 18rpx;
					margin-bottom: 8rpx;
				}

				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
			}
		}

		.tabs {
			box-shadow: inset 0rpx 44rpx 102rpx #efefef;
			height: 88rpx;
			// padding-top: 100rpx !important;
			line-height: 88rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			position: relative;

			.tabs-item {
				display: inline-block;
				margin-left: 38rpx;

				&:first-child {
					margin-left: 0;

				}

			}

			.tabs-bottom-line {
				width: 40rpx;
				height: 4rpx;
				background-color: #8EBC8B;
				position: absolute;
				bottom: 0;
				left: 40rpx;
				transition: all ease-in-out .3s;
				border-radius: 2rpx;
				right: 0;

			}
		}
			.no-data{
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				color: #333333;
				width: 100%;

				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
			}
		.box-group {

			padding: 30rpx;
			box-sizing: border-box;
			

			.box-item {
				margin-bottom: 10px;
				// border: 1px solid #8EBC8B;
				background-color: #FFFFFF;
				width: 100%;
				// height: 100rpx;
				// padding: 20rpx 0;
				border-radius: 4rpx;
				box-shadow: 0rpx -4rpx 10rpx #8EBC8B inset; //#DAA521 #F18180 #BA56D4

				.action-item {
					// 	height: 102rpx;
					// 	line-height: 1.7;
					// 	background-color: #fefefe;
					// 	box-shadow:inset 0rpx 44rpx 102rpx #efefef;


					.list {
						padding: 0 24rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							.text {
								line-height: 1.5;
								font-size: 16rpx;
								padding: 18rpx 0;
							}
						}

						.right {
							font-size: 18rpx;
							line-height: 1.5;
						}
					}
				}
			}
		}

	}
</style>